<template>
	<div class="box" style="background: #fff; padding: 0;">
		
		<div class="seach">
			<input type="text" placeholder="请输入文件名"  @input="getInit" v-model="remark" />
		</div>
		
		<ul class="list">
			<li v-for="(item,index) in dataList" :key="index">
				<div class="header">
					<span>{{item.dataJson.remark || 'xxx文件'}}</span>
					<div class="icon">
						<van-icon name="edit" @click="updateFile(item)" />
						<van-icon name="delete-o" @click="delFile(item)" style="margin-left: 10px;" />
					</div>
				</div>
				
				<div class="content" @click="openFile(item)">
					<!-- <p><span>文件地址</span>：{{item.url}}</p> -->
					<p><span>创建人</span>：{{item.userName}}</p>
					<p><span>创建时间</span>：{{item.createTime}}</p>
					<p><span>文件编号</span>：{{item._id}}</p>
				</div>
				
			</li>

			<van-empty description="暂无word文件" v-if='dataList.length == 0' />
		</ul>

		<div class="btn">
			<button @click="addFile">创建新的文件</button>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				remark:''
			}
		},

		onShow() {
			this.getInit()
		},

		methods: {

			async getInit() {
				let result = await this.$axios('overallSituation', {
					state: 'look',
					databaseName: "wordFile",
					remark:this.remark
				}, true)
				console.log(result , 'result');
				if (result.code != 200) return
				this.dataList = result.data || []
			},

			// 打开文件
			openFile(item) {
				console.log(item , 'item');
				let downloadFile = uni.downloadFile({
					url: item.url,
					success: res => {
						uni.hideLoading()
						uni.openDocument({
							filePath: res.tempFilePath,
							showMenu: true, //允许分享
						})
					}
				})
				
				downloadFile.onProgressUpdate(res => {
					this.progress = res.progress
					uni.showLoading({
						title: "正在打开" + this.progress + '%',
					})
				})
			},

			// 删除文件
			delFile(item) {
				uni.showModal({
					title: '提示',
					content: '您确定删除这个模板吗？',
					confirmText: "确定", //这块是确定按钮的文字
					cancelText: "取消", //这块是取消的文字
					success: async (res) => {
						if (res.confirm) {
							let result = await this.$axios('overallSituation', {
								state: 'delete',
								databaseName: "wordFile",
								_id: item._id
							}, true)

							if (result.code == 200) {
								this.getInit()
							}
						}
					}
				})
			},

			// 修改文件
			updateFile(item) {
				let str = JSON.stringify(item)
				this.$router(`/subPackages2/pages/templateManagement/createResume?data=${str}`)
			},

			// 前往创建文件页面
			addFile() {
				this.$router('/subPackages2/pages/templateManagement/createResume')
			}
		}
	}
</script>

<style scoped>
	.seach {
		width: 100%;
		height: 7%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
	}
	
	.seach input {
		width: 100%;
		height: 36px;
		border-radius: 10px;
		border: 1px solid #f48fb1;
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 12px;
		font-weight: 500;
		display: flex;
		align-items: center;
	}
	
	.list {
		width: 100%;
		height: 84%;
		overflow-y: scroll;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 10px;
		box-sizing: border-box;
	}

	.list li {
		width: 95%;
		border-radius: 10px;
		box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
		/* background: #a5d6a7; */
		margin-bottom: 10px;
		border: 1px solid #f48fb1;
		border-left: 5px solid #ec407a;
		border-right: 5px solid #ec407a;
	}

	.list .header {
		font-size: 14px;
		color: #333;
		font-weight: 700;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		border-bottom: 1px solid #f48fb1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.list li .content {
		padding: 0 10px;
		box-sizing: border-box;
	}

	.list li .content p {
		font-size: 12px;
		color: #333;
		margin: 5px 0;
		width: 100%;
		font-weight: 700;
		overflow: hidden; //溢出隐藏
		word-break: keep-all; //
		white-space: nowrap; //文本不折行
		text-overflow: ellipsis; //显示省略符号来代表被修剪的文本。
	}

	.list li .content p span {
		font-weight: 700;
		width: 20%;
	}

	.list li .headerTitle {
		border-top: 1px solid #fefefe;
		padding: 5px 0 0 0;
		box-sizing: border-box;
		color: #fefefe;
		font-size: 12px;
		font-weight: 400;
		width: 100%;
		text-align: right;
	}

	.list li .headerTitle span {
		color: #333;
		font-size: 12px;
		margin-left: 15px;
	}

	.btn {
		width: 100%;
		height: 7%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.2);
		padding: 10px ;
		box-sizing: border-box;
	}


	.btn button {
		width: 97%;
		height: 35px;
		background: #ec407a;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 12px;
		justify-content: center;
	}
</style>